<header>
    常用组件
</header>
<section>

    @{{vm.file}}@
    <div fx-uploader="options" on-complete="vm.onComplete"></div>

    <form name="SampleForm" class="form-default">
        <fieldset>
            <legend>普通组件</legend>
            <div class="control-group">
                <div class="row-fluid">
                    <div class="span6">
                        <label class="control-label required">不可编辑文本</label>
                        <div class="controls">
                            <p>{{vm.item.text}}</p>
                        </div>
                    </div>

                    <div class="span6">
                        <label class="control-label required">文本输入框 | {{vm.item.text}}</label>
                        <div class="controls">
                            <input type="text" name="text" class="span12" placeholder="文本输入框"
                                   ng-model="vm.item.text" validator="required"  />
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">
                        <label class="control-label required">数字输入框 | {{vm.item.number}}</label>
                        <div class="controls">
                            <input type="text" name="number" class="span12" placeholder="数字输入框 2~10"
                                   ng-model="vm.item.number" validator="number,min=1,max=10"  />
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <label class="control-label required">大文本 | {{vm.item.big}}</label>
                        <div class="controls">
                            <textarea name="big" class="span12"
                                    ng-model="vm.item.big" validator="required"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">
                        <label class="control-label required">日期选择 | {{vm.item.date}}</label>
                        <div class="controls">
                            <input type="text" name="date" class="span12" placeholder="日期选择"
                                   ng-model="vm.item.date"
                                   date-time format="YYYY-MM-DD" view="date" min-view="date"
                                   validator="required" />
                        </div>
                    </div>

                    <div class="span6">
                        <label class="control-label required">时间选择 | {{vm.item.time}}</label>
                        <div class="controls">
                            <input type="text" name="time" class="span12" placeholder="时间选择"
                                   ng-model="vm.item.time"
                                   date-time format="YYYY-MM-DD HH:mm:ss" view="date" min-view="minutes"
                                   validator="required" />
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">
                        <label class="control-label required">下拉框 | {{vm.item.xmgsd}}</label>
                        <div class="controls">
                            <select name="xmgsd" class="span12 fx-select" ng-model="vm.item.xmgsd"
                                    ng-options="xmgsd.dataCode as xmgsd.dataValue for xmgsd in vm.dictionary.xmgsd"
                                    validator="required"></select>
                        </div>
                    </div>

                    <div class="span6">
                        <label class="control-label required">时间选择 | {{vm.item.timepicker}}</label>
                        <div class="controls">
                            <input type="text" name="timepicker" class="span12" placeholder="时间选择"
                                   data-field="time" readonly
                                   ng-model="vm.item.timepicker" fx-timepicker/>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">
                        <label class="control-label required">多选框 | {{vm.item.xmfl}}</label>
                        <div class="controls">
                            <label class="checkbox" ng-repeat="xmfl in vm.dictionary.xmfl">
                                <input type="checkbox" class="fx-checkbox"
                                       name="xmfl_{{$index}}"
                                       value="{{xmfl.dataCode}}"
                                       ng-model="vm.item.xmfl[xmfl.dataCode]"
                                       validator="required" validation-group="xmfl" message-id="xmfl_checkbox"> {{xmfl.dataValue}}
                            </label>
                            <span id="xmfl_checkbox"></span>
                        </div>
                    </div>

                    <div class="span6">
                        <label class="control-label required">单选框 | {{vm.item.xmly}}</label>
                        <div class="controls">
                            <label class="radio" ng-repeat="xmly in vm.dictionary.xmly">
                                <input type="radio" class="fx-radio"
                                       name="xmly_{{$index}}"
                                       value="{{xmly.dataCode}}"
                                       ng-model="vm.item.xmly"
                                       validator="required" validation-group="xmly" message-id="xmly_radio"> {{xmly.dataValue}}
                            </label>
                            <span id="xmly_radio"></span>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">
                        <label class="control-label required">多选框 inline | {{vm.item.xmfl2}}</label>
                        <div class="controls">
                            <label class="checkbox inline" ng-repeat="xmfl in vm.dictionary.xmfl">
                                <input type="checkbox" class="fx-checkbox"
                                       name="xmfl2_{{$index}}"
                                       value="{{xmfl.dataCode}}"
                                       ng-model="vm.item.xmfl2[xmfl.dataCode]"
                                       validator="required" validation-group="xmfl2" message-id="xmfl2_checkbox"> {{xmfl.dataValue}}
                            </label>
                            <span id="xmfl2_checkbox"></span>
                        </div>
                    </div>

                    <div class="span6">
                        <label class="control-label required">单选框 inline | {{vm.item.xmly2}}</label>
                        <div class="controls">
                            <label class="radio inline" ng-repeat="xmly in vm.dictionary.xmly">
                                <input type="radio" class="fx-radio"
                                       name="xmly2_{{$index}}"
                                       value="{{xmly.dataCode}}"
                                       ng-model="vm.item.xmly2"
                                       validator="required" validation-group="xmly2" message-id="xmly2_radio"> {{xmly.dataValue}}
                            </label>
                            <span id="xmly2_radio"></span>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

    </form>
</section>
<footer>
    <button class="btn btn-primary"
            validation-submit="SampleForm"
            ng-click="vm.save(vm.item)">保存</button>
</footer>